<template>
  <app-page card full>
    <app-page-main>
      <!-- 查询 -->
      <template #header>
        <div class="app-query">
          <el-form :inline="true" :model="appQuery" class="table-action" @submit.prevent="appSearch">
            <el-form-item label="名称">
              <el-input placeholder="请输入" v-model="appQuery.departmentName"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="search" @click="appSearch">查询</el-button>
              <el-button icon="refresh" @click="appReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="app-action">
          <el-button type="primary" plain icon="plus" @click="appHandleAdd()">新增</el-button>
        </div>
      </template>

      <!-- 列表 -->
      <el-scrollbar>
        <el-table v-loading="appLoading" :data="appList" style="width: 100%">
          <el-table-column prop="departmentName" label="名称"></el-table-column>
          <el-table-column prop="userNum" label="关联人数"></el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>
          <el-table-column :label="操作">
            <template #default="scope">
              <el-button link type="primary" icon="edit" @click="appHandleEdit(scope.row)">编辑</el-button>
              <el-button link type="primary" icon="delete" @click="appHandleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </app-page-main>

    <!-- 分页 -->
    <template #footer>
      <el-pagination
        @size-change="appHandleSizeChange"
        @current-change="appHandlePageChange"
        :current-page="appPage"
        :page-size="appPageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="appTotal"
      />
    </template>

    <!-- 弹窗新增/编辑内容 -->
    <app-dialog-edit v-model="appShowDetail" :detail="appDetail" :json="formJson" @change="$router.go(0)" />
  </app-page>
</template>

<script>
import { mixins } from 'jax-node'

export default {
  mixins: [mixins.pageList],
  data() {
    return {
      departmentList: [],
    }
  },
  created() {
    this.departmentListRes()
  },
  computed: {
    formJson() {
      const required = true
      const maxLabel = { style: 'width: 450px' }

      return [
        { name: 'parentId', label: '上级', type: 'select', options: this.departmentList },
        { name: 'departmentName', label: '名称', placeholder: '请输入', required, inputAttr: maxLabel },
        { name: 'remark', label: '备注', type: 'textarea', placeholder: '请输入', inputAttr: maxLabel },
      ]
    },
  },
  methods: {
    // 获取部门列表
    departmentListRes() {
      this.$http.get(`/system/department`).then(res => {
        this.departmentList = res.list.map(item => {
          return { label: item.departmentName, value: item.departmentId }
        })
      })
    },
  },
}
</script>
